<template>
    <div>

      <div class="header">
        <img src="../../../static/image/LOGO.png" alt="">
      </div>
      <div class="unLogin" v-if="!hasAccredit">
        <p>登录后开发者将获得以下权限</p>
        <p><span></span><span>获得你的公开信息（昵称、头像等）</span></p>
        <i-button i-class="loginBtn" type="success" open-type="getUserInfo" v-if="canIUse" @getuserinfo="bindGetUserInfo" @click="getUserInfo1">确认登录</i-button>
      </div>
      <div class="hasLogin" v-else>
        <p>欢迎回到Triangle健身，您已授权登录过<br>我们将在 <span>{{ time }}</span> 秒后为您跳转首页</p>
      </div>
      <i-message id="message" />
    </div>
</template>
<script>
  const { $Message } = require('../../../static/iview/base/index');
    export default {
      name: '',
      data(){
        return {
          canIUse: wx.canIUse('button.open-type.getUserInfo'),
          hasAccredit:null,   //用户是否授权
          time:3,   //登陆成功后的倒计时
        }
      },
      methods: {

        //获取用户的授权记录
        getSetting(){
          let that = this;
          wx.getSetting({
            success: function (res) {
              if (res.authSetting['scope.userInfo']) {
                wx.getUserInfo({
                  success: function (resUserInfo) {
                    //用户没有登录自己的后台
                    if(!wx.getStorageSync('userInfo') || !wx.getStorageSync('token')){
                      //获取用户的code
                      wx.login({
                        success (res) {
                          if (res.code) {
                            //发起登录网络请求
                            wx.showLoading({
                              title: '加载中' // 数据请求前loading
                            });
                            wx.request({
                              url: that.$baseURL + '/wxlogin',
                              data: {
                                code:res.code,
                                avatarUrl:resUserInfo.userInfo.avatarUrl,
                                city:resUserInfo.userInfo.city,
                                country:resUserInfo.userInfo.country,
                                gender:resUserInfo.userInfo.gender,
                                nickName:resUserInfo.userInfo.nickName,
                                province:resUserInfo.userInfo.province
                              },
                              method:"POST",
                              success (res) {
                                wx.hideLoading();
                                wx.clearStorageSync();
                                if(res.data.code == -1){
                                  $Message({
                                    content: '您的账号已被拉黑，请联系管理员',
                                    type:'error'
                                  });
                                  return false;
                                }
                                if(res.data.code == 0){
                                  that.hasAccredit = true;
                                  wx.setStorageSync('userInfo', res.data.user);
                                  wx.setStorageSync('token', res.data.data);
                                  that.cutDownPageSkip();
                                }
                              }
                            })
                          } else {
                            $Message({
                              content: '登录失败，请重试！'
                            });
                          }
                        }
                      });
                    } else {
                        that.cutDownPageSkip();
                    }
                  }
                })
              } else {
                that.hasAccredit = false;
              }
            }
          })
        },

        //判断用户的微信版本是否支持授权版本
        getUserInfo1(){
          // 判断小程序的API，回调，参数，组件等是否在当前版本可用。  为false 提醒用户升级微信版本
          if (wx.canIUse('button.open-type.getUserInfo')) {
          } else {
            $Message({
              content: '请升级微信版本'
            });
          }
        },

        //页面跳转
        pageSkip(){
          wx.switchTab({
            url: '../index/main'
          })
        },

        //页面跳转倒计时函数
        cutDownPageSkip(){
          let that = this;
          this.hasAccredit = true;
          let countdown =  setInterval(function () {
            if(that.time < 1){
              clearInterval(countdown);
              that.pageSkip();
            } else {
              that.time --;
            }
          },1000);
        },

        //用户点击授权之后，获取用户基本信息
        bindGetUserInfo(e) {
          if (e.mp.detail.rawData) {  //用户点击了授权登录
            this.getSetting();
          } else {  //用户按了拒绝按钮
            $Message({
              content: '授权登陆后方可使用'
            });
          }
        },
      },
      mounted(){
        this.getSetting();
        this.hasAccredit = false;
      },
      onShow(){
         this.time = 3;
      },
      onLoad: function(options) {
          //如果页面是从拉黑返回的，就清楚用户的所有授权记录，和本地缓存
          if(options.type == 'blacklist'){
            wx.clearStorageSync();
          }
      }
    }
</script>

<style>
  .header{
    width: 85%;
    height: 420rpx;
    box-sizing: border-box;
    margin: 0 auto 60rpx auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1rpx solid #EEEEEE;
  }
  .header>img{
    width: 315rpx;
    height: 320rpx;
  }
  /*未登录样式*/
  .unLogin{
    width: 85%;
    margin: 0 auto;
  }
  .unLogin>p:nth-of-type(1){
    font-size: 28rpx;
    color: #282828;
    font-weight: bold;
    margin-bottom: 30rpx;
  }
  .unLogin>p:nth-of-type(2){
    color: #999999;
    font-size: 26rpx;
    display: flex;
    align-items: center;
    margin-bottom: 80rpx;
  }
  .unLogin>p:nth-of-type(2)>span:nth-of-type(1){
    width: 4rpx;
    height: 4rpx;
    border-radius: 50%;
    background-color: #999999;
    margin-right: 22rpx;
  }

  /*已登录样式*/
  .hasLogin{
    width: 70%;
    margin: 0 auto;
    color: #999999;
    font-size: 28rpx;
    text-align: center;
    line-height:44rpx;
  }
  .hasLogin span{
    font-size: 28rpx;
    color: #24C68A;
  }
</style>
